@use '@unocss/reset/tailwind.css';

// 👉 Global CSS Resets
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeSpeed;
}

:root {
    // #region all-css-vars
    --a-base-c: var(--a-primary-hue), 10%, 20%;

    --a-spacing: 1;

    // ℹ️ Represents theme color. light => white, dark => black. ATM, it's used for backdrop & badge outline color.
    --a-theme-c: 0, 0%, 100%;

    --a-border-opacity: 0.12;
    --a-loader-overlay-bg-c: var(--a-theme-c);
    --a-loader-overlay-bg-opacity: 0.85;

    --a-backdrop-c: 0, 0%, 0%;
    --a-backdrop-opacity: 0.35;

    // text emphasis
    --a-text-emphasis-high-opacity: 0.87;
    --a-text-emphasis-medium-opacity: 0.68;
    --a-text-emphasis-light-opacity: 0.38;

    // Typography
    --a-title-c: var(--a-base-c);
    --a-subtitle-c: var(--a-base-c);
    --a-title-opacity: var(--a-text-emphasis-high-opacity);
    --a-subtitle-opacity: var(--a-text-emphasis-light-opacity);

    // SECTION Components

    // 👉 Card
    --a-card-spacer: 1em;
    --a-card-padding: 1.25em;

    // 👉 Spinner
    --a-spinner-size: 1.25em;

    // 👉 Switch
    --a-switch-track-size: 3em;
    --a-switch-thumb-margin: .25em;
    --a-switch-default-color: 220, 13%, 91%;
    /*
      ℹ️ Value of this property is => hsla(var(--a-base-c), var(--a-text-emphasis-medium-opacity)).
      As this will be always on light background we will keep it static and choose color from light scheme
    */
    --a-switch-icon-color: hsla(0, 10%, 20%, 0.68);

    --a-tooltip-bg-c: 0,0%,8%;
    // #endregion all-css-vars

    // !SECTION
}

:root.dark {
  --a-base-c: var(--a-primary-hue), 0%, 94%;
  --a-theme-c: 0, 0%, 0%;
  --a-loader-overlay-bg-opacity: 0.75;
  --a-backdrop-opacity: 0.5;

  // SECTION Components

  // 👉 Switch
    --a-switch-default-color: 0, 0%, 16%;

    // 👉 Tooltip
    --a-tooltip-bg-c: 0,0%,25%;

  // !SECTION
}

// 👉 Typography

body {
  background-color: hsl(var(--a-body-bg-c));
  color: var(--a-body-color);

  // Disable mobile tap blue color
  -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: hsla(var(--a-base-c), 0.87);
}

// 👉 Misc

@keyframes shake {
  0%   {transform: translateX(0);}
  25%  {transform: translateX(1px);}
  50%  {transform: translateX(-1px);}
  100% {transform: translateX(0);}
}

.a-base-input-label.text-danger {
    animation-name: shake;
    animation-duration: 0.35s;
}

// Set default border-color for `hr` element for color scheme compatibility
hr {
  border-color: hsla(var(--a-base-c),var(--a-border-opacity))
}

// Remove outline
.a-btn,
input,
select,
textarea {
  &:focus {
    outline: none;
  }
}

// ℹ️ Remove autocomplete styles
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--a-body-color);
  transition: background-color 5000s ease-in-out 0s;
}
